<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>在线支付</p>
		</header>

		<!-- 订单信息部分 -->
		<h3>订单信息：</h3>
		<div class="order-info">
			<p>
				{{orders.business.businessName}}
				<i class="fa fa-caret-down" @click="detailetShow"></i>
			</p>
			<p>&#165;{{orders.orderTotal}}</p>
		</div>

		<!-- 订单明细部分 -->
		<ul class="order-detailet" v-show="isShowDetailet">
			<li v-for="item in orders.list" :key="item.id">
				<p>{{item.food.foodName}} x {{item.quantity}}</p>
				<p>&#165;{{item.food.foodPrice*item.quantity}}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{orders.business.deliveryPrice}}</p>
			</li>
		</ul>

		<!-- 支付方式部分 -->
		<ul class="payment-type">
			<li @click="selectPaymentType('alipay')" :class="{ 'selected': selectedPayment === 'alipay' }">
				<img src="../assets/alipay.png" alt="支付宝">
				<i class="fa fa-check-circle" v-if="selectedPayment === 'alipay'"></i>
			</li>
			<li @click="selectPaymentType('wechat')" :class="{ 'selected': selectedPayment === 'wechat' }">
				<img src="../assets/wechat.png" alt="微信支付">
				<i class="fa fa-check-circle" v-if="selectedPayment === 'wechat'"></i>
			</li>
		</ul>
		<div class="payment-button">
			<button @click="confirmPayment" :disabled="isProcessing">
				{{ isProcessing ? '支付处理中...' : '确认支付' }}
			</button>
			<button class="cancel-payment" @click="cancelPayment" :disabled="isProcessing">取消支付</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'Payment',
		data(){
			return {
				orderId: this.$route.query.orderId,
				orders: {
					business: {},
					businessId: 0,
					orderTotal: 0,
					list: []
				},
				isShowDetailet: false,
				isProcessing: false, // 防止重复提交
				selectedPayment: 'alipay' // 默认选中支付宝
			}
		},
		created() {
			this.fetchOrderDetails();
		},
		mounted() {
			// 防止返回订单确认页的逻辑
			history.pushState(null, null, document.URL);
			window.onpopstate = () => {
				this.$router.push({path: '/index'});
			}
		},
		destroyed() {
			window.onpopstate = null;
		},
		methods:{
			// 获取订单详情
			fetchOrderDetails() {
				this.$axios.get(`/api/orders/${this.orderId}`)
					.then(response => {
						const result = response.data;
						if (result.success && result.data) {
							// 适配前端模板所需的数据结构
							this.orders = {
								...result.data,
								business: {
									businessName: result.data.businessName,
									deliveryPrice: result.data.deliveryPrice || 0
								},
								list: result.data.orderDetailets.map(detail => ({
									...detail,
									food: {
										foodName: detail.foodName,
										foodPrice: detail.itemPrice
									}
								}))
							};
						} else {
							console.error('获取订单失败:', result.message || '未知错误');
							alert('获取订单信息失败，请返回重试');
						}
					})
					.catch(error => {
						console.error('请求订单详情接口出错:', error);
						alert('网络错误，无法获取订单信息');
					});
			},
			
			detailetShow() {
				this.isShowDetailet = !this.isShowDetailet;
			},
			
			// 选择支付方式
			selectPaymentType(type) {
				this.selectedPayment = type;
			},
			
			// 确认支付 - 调用模拟支付接口
			confirmPayment() {
				if (this.isProcessing) return;
				
				// 检查订单是否有效
				if (!this.orders.id) {
					alert('订单信息无效，请返回重试');
					return;
				}
				
				this.isProcessing = true;
				
				// 调用模拟支付接口
				this.$axios.post(`/api/orders/${this.orderId}/simulate-payment`)
					.then(response => {
						const result = response.data;
						
						if (result.success) {
							// 支付成功，显示成功信息并跳转
							alert('支付成功！您的订单已确认');
							
							// 跳转到订单列表页面
							this.$router.push('/orderList');
						} else {
							console.error('支付失败:', result.message);
							alert(`支付失败: ${result.message || '服务器处理失败'}`);
							this.isProcessing = false;
						}
					})
					.catch(error => {
						console.error('支付请求出错:', error);
						alert(`支付失败: ${error.response?.data?.message || '网络异常，请重试'}`);
						this.isProcessing = false;
					});
			},
			
			cancelPayment() {
				if (this.isProcessing) return;
				
				// 跳转到商家详情页
				this.$router.push({
					path: '/businessInfo',
					query: { 
						businessId: this.orders.businessId
					}
				});
			}
		},
		components: {
			Footer
		}
	}
</script>
    
<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 订单信息部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;

		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order-info {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-info p:last-child {
		color: orangered;
	}

	/****************** 订单明细部分 ******************/
	.wrapper .order-detailet {
		width: 100%;
	}

	.wrapper .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-detailet li p {
		font-size: 3vw;
		color: #666;
	}

	/****************** 支付方式部分 ******************/
	.wrapper .payment-type {
		width: 100%;
	}

	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
		border-bottom: 1px solid #eee;
		cursor: pointer;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .payment-type li.selected {
		background-color: #f5f5f5;
	}

	.wrapper .payment-type li img {
		width: 33vw;
		height: 8.9vw;
	}

	.wrapper .payment-type li .fa-check-circle {
		font-size: 5vw;
		color: #38CA73;
	}

	.wrapper .payment-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
		display: flex;
		flex-direction: column;
		gap: 3vw;
		margin-top: 6vw;
	}

	.wrapper .payment-button button {
		width: 100%;
		height: 10vw;
		border: none;
		outline: none;
		border-radius: 4px;
		background-color: #38CA73;
		color: #fff;
		font-size: 3.8vw;
		cursor: pointer;
		transition: background-color 0.3s;
	}
	
	.wrapper .payment-button button:disabled {
		background-color: #99ccb2;
		cursor: not-allowed;
	}
	
	.wrapper .payment-button .cancel-payment {
		background-color: #999999;
	}
	
	.wrapper .payment-button .cancel-payment:disabled {
		background-color: #b3b3b3;
	}
</style>
